<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/11/14
  Time: 9:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <%--    <link rel="stylesheet" href="font/iconfont.css">--%>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            position: relative;
            width: 300px;
            height: 40px;
            margin: 0 auto;
            margin-top: 10px;
            background-color: #e8e8e8;
            box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
        }
        .bgColor{
            position: absolute;
            left:0;
            top:0;
            width:40px;
            height: 40px;
            background-color: lightblue;
        }
        .txt{
            position: absolute;
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #000;
            text-align: center;
        }
        .slider{
            position: absolute;
            left:0;
            top:0;
            width: 50px;
            height: 38px;
            border: 1px solid #ccc;
            background: #fff;
            text-align: center;
            cursor: move;
        }
        .slider>i{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
        .slider.active>i{
            color:green;
        }

        #usernameTips{
            padding: 0 15px 0 0;
            width: 100%;
            text-align: right;
        }

        #pwTips{
            padding: 0 15px 0 0;
            width: 100%;
            text-align: right;
        }
    </style>

    <%--        表格样式--%>
    <style type="text/css">
        table.imagetable {
            font-family: verdana,arial,sans-serif;
            font-size:15px;
            color:#333333;
            border-width: 2px;
            border-color: #999999;
            border-collapse: collapse;
        }
        table.imagetable th {
            background:#b5cfd2;
            border-width: 2px;
            padding: 8px;
            border-style: solid;
            border-color: #999999;
        }

        table.imagetable td {
            background:#dcddc0;
            border-width: 2px;
            padding: 8px;
            border-style: solid;
            border-color: #999999;
        }

        table.imagetable thead th:first-child {
            border-radius: 5px 0 0 0;
            border: 1px solid blue;
        }
        table.imagetable thead th:last-child {
            border-radius: 0 5px 0 0;
            border-right: 1px solid blue;
        }
        table.imagetable tbody tr:last-child td:first-child {
            border-radius: 0 0 0 5px;
        }

        table.imagetable tbody tr:last-child td:last-child {
            border-radius: 0 0 5px 0;
        }
    </style>

    <style>
        input{
            outline-style: none ;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 13px 14px;
            width: 64px;
            height: 30px;
            font-size: 14px;
            font-weight: 700;
            font-family: "Microsoft soft";
        }

        #Search #SearchContent #btn_search {
            padding: 0;
        }

        .Button{
            outline-style: none ;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 13px 14px;
            width: 100px;
            height: 30px;
            font-size: 14px;
            font-weight: 700;
            font-family: "Microsoft soft";
        }
        .titleshopcart {
            margin-bottom: 10px;
        }
        .vcodediv .vcode {
            display: inline-block;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 2px;
            padding: 10px 0 10px 5px;
        }
    </style>

    <style type="text/css">
        #panel1,#flip1,#panel2,#flip2,#panel3,#flip3,#panel4,#flip4,#panel5,#flip5
        {
            padding:9px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }

        #flip1, #flip2, #flip3, #flip4, #flip5 {
            line-height: 40px;
        }

        #panel1,#panel2,#panel3,#panel4,#panel5
        {
            padding:10px 50px;
            display:none;
        }

        #Sidebar {
            width: 400px;
            margin-left: 50px;
            margin-top: 10px;
        }

        #WelcomeContent {
            margin-left: 58px;
            font-size: 26px;
        }

        .arrowMored {
            display: inline-block;
            height: 20px;
            width: 30px;
            background: url("images/arrowMored1.png") 0px 0px no-repeat;
            background-size: 30px 20px;
            float: right;
        }

        .arrowMoreu {
            display: inline-block;
            height: 20px;
            width: 30px;
            background: url("images/arrowMoreu1.png") no-repeat;
            background-size: 30px 20px;
            float: right;
        }
    </style>


    <%--    轮播图--%>
    <style>
        /* 全局样式设置 */
        h1{
            text-align: center;
            /*line-height: 100px;*/
        }
        a{
            text-decoration: none;
        }
        /* 设置轮播图样式 */
        /* 图片显示样式 */
        .banner_slider{
            position: relative;
            background-color: green;
            margin:0 auto;
            width:600px;
            height: 380px;
            overflow:hidden;
            border-radius: 15px;
            left: -90px;
        }
        .banner_slider_pics{
            width:4200px;
            height: 100%;
            margin:0 auto;
            position: relative;
            left:-600px;
            border-radius: 15px;
        }
        .banner_slider_pics>a{
            width: 600px;
            height: 380px;
            display: block;
            float: left;
            text-align:center;
        }
        .banner_slider_pics>a> img{
            width: 100%;
            height: 380px;
        }
        /* 上一张，下一张按钮样式 */
        .banner_slider_arrow{
            width: 600px;
            height: 40px;
            position: absolute;
            left: 0;
            bottom: 50%;
            margin-bottom: -20px;
        }
        .arrow_item{
            font-size: 25px;
            font-weight: bold;
            color: #fff;
            background-color: rgba(0,0,0,.6);
            opacity: .6;
        }
        .arrow_item:hover{
            opacity: .8;
        }
        .prev{
            position: absolute;
            left: 10px;
            padding: 12px 7px 8px 7px;
            border-radius: 6px;
        }
        .next{
            position: absolute;
            right: 10px;
            padding: 12px 7px 8px 7px;
            border-radius: 6px;
        }
        /* 圆点按钮 */
        .banner_slider_dots{
            width: 100%;
            height: 30px;
            line-height: 30px;
            position: absolute;
            bottom: 10px;
            text-align: center;
        }
        .dots_item{
            display: inline-block;
            width:10px;
            height: 10px;
            background-color: #999;
            border-radius:50%;
            border:3px solid #fff;
            margin-right: 10px;
        }
        .dots_active{
            background-color: #fff;
            border-color:orange;
        }
    </style>

    <link rel="StyleSheet" href="css/jpetstore.css" type="text/css"
          media="screen" />
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--图标-->
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">

    <!--布局框架-->
    <link rel="stylesheet" type="text/css" href="css/util.css">

    <!--主要样式-->
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>MyPetStore</title>
    <meta content="text/html; charset=windows-1252"
          http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <script type="text/javascript" src="AjaxScript/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="AjaxScript/jquery-ui.js"></script>


    <%--    <script>--%>
    <%--        var container = document.getElementById("main");--%>
    <%--        container.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=50,finishOpacity=50)";--%>
    <%--        container.style.opacity = "0.8";--%>
    <%--    </script>--%>

    <%--    任务--%>
    <script>

        $(function() {
            /* 表单验证 */
            $('#username').on('blur', function () {
                $.ajax({
                    type    : "GET",
                    url     : "usernameExist?username="+this.value,
                    success : function (data) {
                        if (data.msg === 'Exist'){
                            $('#usernameTips').attr("class", "notokTips").text('Invalid');
                        } else if (data.msg === 'Not Exist'){
                            $('#usernameTips').attr("class", "okTips").text('Available');
                        }
                    }
                });
            });

            $('#usernamelogin').on('blur', function () {
                $.ajax({
                    type    : "GET",
                    url     : "usernameExist?username="+this.value,
                    success : function (data) {
                        if (data.msg === 'Not Exist'){
                            $('#usernameTips').attr("class", "notokTips").text('Invalid');
                        } else if (data.msg === 'Exist'){
                            $('#usernameTips').attr("class", "okTips").text('Available');
                        }
                    }
                });
            });

            $('#repw').on('blur', function () {
                $.ajax({
                    type    : "GET",
                    url     : "passwordValid?newpw="+$('#newpw').val()+"&repw="+this.value,
                    success : function (data) {
                        if(data.code === 0){
                            $('#pwTips').attr("class", "notokTips").text('Invalid');
                        } else if (data.code === 1) {
                            $('#pwTips').attr("class", "okTips").text('Available');
                        }
                    }
                });
            });


            /* 自动补全，input标签id为input_search */
            $('#input_search').autocomplete({
                /* source是自动补全内容的选取范围，通过函数实现 */
                source: function (request, response) {
                    var rs = [];
                    $.ajax({
                        type    : "GET",
                        url     : "searchAutoComplete?keyword="+$('#input_search').val(),
                        success : function (data) {
                            if(data.productList!=null){
                                /* 将返回的数据作为结果 */
                                for(var i=0; i<5&&i<data.productList.length; i++)
                                    rs.push(data.productList[i]);

                                response($.map(rs, function (item) {
                                    return {
                                        /* 选取name为补全的内容 */
                                        label: item.name.toString()
                                    };
                                }));
                            }
                        }
                    });
                }
            });
        });
    </script>

    <%--    轮播图--%>
    <script>
        window.onload=function(){
            var banner_slider=$('#banner_slider'),
                pics=$('#banner_slider_pics'),
                items=$('#banner_slider_pics a'),
                pic_width=items.eq(0).width(),
                dots=$('#banner_slider_dots a'),
                btn_prev=$('#arrow_prev'),
                btn_next=$('#arrow_next'),
                current=0,
                timmer=null,
                size = dots.length;
            // 定义一个鼠标滑过判断事件
            banner_slider.hover(function(){
                clearInterval(timmer);
            },function(){
                timmer=setInterval(slider,3000);
            });
            function slider(){
                current++;
                doSlider();
            }
            function doSlider(){
                // 圆点按钮轮播
                dots.removeClass('dots_active').eq(current%size).addClass('dots_active');
                // 图片轮播
                pics.stop().animate({
                    left:-(current+1)*pic_width
                },1000,function(){
                    if(current==size){
                        current=0;
                        pics.css('left',-(current+1)*pic_width+'px');
                    }else if(current==-1){
                        current=size-1;
                        pics.css('left',-(size)*pic_width+'px');
                    }
                });
            }

            timmer=setInterval(slider,3000);
            // 点击上一张按钮切换图片
            btn_prev.click(function(){
                current--;
                doSlider();
            });
            // 点击下一张按钮切换图片
            btn_next.click(function(){
                current++;
                doSlider();
            });
            // 点击圆点切换图片
            dots.click(function(){
                current=$(this).index();
                doSlider();
            });



            $('.banner_slider_pics').children().each(function (index, val) {
                //获取.banner_slider_pics下的子元素$(this)，即遍历的某个a标签
                var alog = $(this);
                $.ajax({
                    type:   "GET",
                    url:    "searchTooltip?categoryId="+alog.attr('class'),
                    success: function (data) {
                        var dscn = 'Category: '+alog.attr('class')
                            +'\nProductID and Name: \n';
                        if (data.productList!=null){
                            for (var i=0;i<data.productList.length;i++){
                                dscn += data.productList[i].productId.toString();
                                dscn += ' ';
                                dscn += data.productList[i].name.toString();
                                dscn += '\n';
                            }
                            alog.attr('title', dscn);
                        }
                    }
                });
            });
        }
    </script>

    <%--    主界面折叠 --%>
    <script>
        $(document).ready(function(){
            $("#flip1").click(function(){
                $("#panel1").slideToggle("slow");
                if($("#flip1 i").attr("class")==="arrowMored")
                    $("#flip1 i").attr("class", "arrowMoreu");
                else if($("#flip1 i").attr("class")==="arrowMoreu")
                    $("#flip1 i").attr("class", "arrowMored");
            });
            $("#flip2").click(function(){
                $("#panel2").slideToggle("slow");
                if($("#flip2 i").attr("class")==="arrowMored")
                    $("#flip2 i").attr("class", "arrowMoreu");
                else if($("#flip2 i").attr("class")==="arrowMoreu")
                    $("#flip2 i").attr("class", "arrowMored");
            });
            $("#flip3").click(function(){
                $("#panel3").slideToggle("slow");
                if($("#flip3 i").attr("class")==="arrowMored")
                    $("#flip3 i").attr("class", "arrowMoreu");
                else if($("#flip3 i").attr("class")==="arrowMoreu")
                    $("#flip3 i").attr("class", "arrowMored");
            });
            $("#flip4").click(function(){
                $("#panel4").slideToggle("slow");
                if($("#flip4 i").attr("class")==="arrowMored")
                    $("#flip4 i").attr("class", "arrowMoreu");
                else if($("#flip4 i").attr("class")==="arrowMoreu")
                    $("#flip4 i").attr("class", "arrowMored");
            });
            $("#flip5").click(function(){
                $("#panel5").slideToggle("slow");
                if($("#flip5 i").attr("class")==="arrowMored")
                    $("#flip5 i").attr("class", "arrowMoreu");
                else if($("#flip5 i").attr("class")==="arrowMoreu")
                    $("#flip5 i").attr("class", "arrowMored");
            });

        });
    </script>
</head>

<body>
<%--点线粒子特效--%>
<%--<script color="255,255,255" opacity="1" count="99" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.js" type="text/javascript" charset="utf-8"></script>--%>


<div id="Header">

    <div id="Logo">
        <div id="LogoContent">

            <a href="#"><img src="images/logo-topbar.gif" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">

            <a href="viewCart"><img align="middle" name="img_cart" src="images/cart.gif" /></a>
            <img align="middle" src="images/separator.gif" />
            <c:if test="${sessionScope.account == null}">

                <a href="signonForm">Sign In</a>
            </c:if>

            <c:if test="${sessionScope.account != null}">

                <a href="signoff">Sign Out</a>
                <img align="middle" src="images/separator.gif" />

                <a href="editAccount?username=${sessionScope.account.username}">My Account</a>
                <%--                </c:if>--%>
            </c:if>
            <img align="middle" src="images/separator.gif" />
            <a href="help.html">?</a>
        </div>
    </div>

    <div id="Search">
        <div id="SearchContent">
            <form action="search">
                <input type="text" name="keyword" size="14" id="input_search"/>
                <input type="submit" name="search" value="Search" id="btn_search"/>
            </form>
        </div>
    </div>

    <div id="QuickLinks">
        <a href="viewCategory?categoryId=FISH">
            <img src="images/sm_fish.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=DOGS">
            <img src="images/sm_dogs.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=REPTILES">
            <img src="images/sm_reptiles.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=CATS">
            <img src="images/sm_cats.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="viewCategory?categoryId=BIRDS">
            <img src="images/sm_birds.gif" />
        </a>
    </div>

</div>

<div id="Content">
    <td colspan="2" align="right">
        <%
            String msg = (String)request.getAttribute("loginMsg");
            if(msg!=null)
            {
                out.println("<font color='red'>"+msg+"</font>");
            }
        %>
    </td>